<template>
    <div class="block-config-chain-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">

            <el-card shadow="hover">
                <el-form :model="state.ruleForm" ref="malledisdiaFormRef" :rules="rules" size="default" label-width="100px">

                    <el-row>
                        <el-col>
                            <el-form-item label="链关联ID">
                                <el-select v-model="state.ruleForm.chainConfigId" placeholder="请选择">
                                    <el-option v-for="item in state.chainList" :key="item.chainConfigId" :label="item.chainSymbol" :value="item.chainConfigId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item label="合约类型">
                                <el-select v-model="state.ruleForm.contractType" placeholder="请选择">
                                    <el-option v-for="item in state.contractTypes" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <div>
                        <el-form-item label="合约地址">
                            <el-input v-model="state.ruleForm.contractAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="合约OWNER">
                            <el-input v-model="state.ruleForm.contractOwner"></el-input>
                        </el-form-item>
                    </div>

                    <div style="display:flex;">
                        <el-form-item label="名称">
                            <el-input v-model="state.ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="符号">
                            <el-input v-model="state.ruleForm.symbol"></el-input>
                        </el-form-item>
                        <el-form-item label="小数位数">
                            <el-input v-model.number="state.ruleForm.erc20Decimals" type="number"></el-input>
                        </el-form-item>

                        <el-form-item label="配置状态">
                            <el-switch v-model="state.ruleForm.contractStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="10"
                                :inactive-value="20"></el-switch>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="扩展1">
                            <el-input style="width:270%" v-model="state.ruleForm.expand1" placeholder="" type="textarea" :rows="10"></el-input>
                        </el-form-item>
                    </div>


                </el-form>


            </el-card>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts" name="mailsendeditdialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';
// 导入接口
import { useChainApi } from "../../../../api/chain";
import { useBlockApi } from "../../../../api/block";
const malledisdiaFormRef = ref();
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const rules = {
    userName: [
        {
            required: true,
            message: "不能为空，请重新输入！",
            trigger: "blur"
        },
        { min: 2, max: 50, message: "长度在2到50个字符", trigger: "blur" }
    ],
    password: [
        {
            required: true,
            message: "不能为空，请重新输入！",
            trigger: "blur"
        },
        { min: 6, max: 50, message: "长度在6到50个字符", trigger: "blur" }
    ],
    roleCode: [
        {
            required: true,
            message: "不能为空，请选择！",
            trigger: "blur"
        }
    ]
}


const state = reactive({
    // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式

    isEdit: false,
    chainList: [] as any,
    contractTypes: [{
        value: 10,
        label: 'ERC20'
    }, {
        value: 20,
        label: 'ERC721'
    }, {
        value: 30,
        label: '其他合约'
    }],
    ruleForm: {

        chainConfigId: "",
        contractConfigId: "",
        contractType: 10,
        contractAddress: "",
        contractOwner: "",
        name: "",
        symbol: "",
        erc20Decimals: "",
        contractStatus: true,
        expand1: true,
        //abi:"",

    } as any,
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});


// 打开弹窗
const openDialog = async (type: string, row?: any) => {
    if (type == "add") {
        state.ruleForm = {
            chainConfigId: "",
            contractConfigId: "",
            contractType: "",
            contractAddress: "",
            contractOwner: "",
            name: "",
            symbol: "",
            erc20Decimals: "",
            contractStatus: 10,
            abi: ""

        }
        state.dialog.title = '新增';
        state.dialog.submitTxt = '增加';
        state.dialog.type = "add";
    }
    else {
        state.ruleForm = {
            chainConfigId: row.chainConfigId,
            contractConfigId: row.contractConfigId,
            contractType: row.contractType,
            contractAddress: row.contractAddress,
            contractOwner: row.contractOwner,
            name: row.name,
            symbol: row.symbol,
            erc20Decimals: row.erc20Decimals,
            contractStatus: row.contractStatus,
            abi: row.abi,
            expand1: row.expand1,

        }
        state.dialog.type = 'edit'
        state.dialog.title = '更改配置';
        state.dialog.submitTxt = '更改';
        // 清空表单，此项需加表单验证才能使用
    }

    state.dialog.isShowDialog = true;
    handlergetchainList();

};

const handlergetchainList = async () => {
    let vo = {
        page: 1,
        limit: 999,

    }
    state.chainList = [];
    let listTemp = await useChainApi().getChainList(vo);
    state.chainList = listTemp.list;
}



// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = async () => {


    try {
        if (state.dialog.type == "add") {
            let vo = {
                chainConfigId: state.ruleForm.chainConfigId,
                contractType: state.ruleForm.contractType,
                contractAddress: state.ruleForm.contractAddress,
                contractOwner: state.ruleForm.contractOwner,
                name: state.ruleForm.name,
                symbol: state.ruleForm.symbol,
                erc20Decimals: state.ruleForm.erc20Decimals,
                contractStatus: state.ruleForm.contractStatus,
                abi: state.ruleForm.abi
            }
            await useBlockApi().addContract(vo)


        }
        else {
            let vo = Object.assign({}, {}, state.ruleForm);
            await useBlockApi().updateContract(vo)
        }
        ElMessage.success("操作成功");
        closeDialog(); // 关闭弹窗
        emit('refresh');
    } catch (error: any) {
        ElMessage.error(error.msg);
    }

};





watch(
    () => state.dialog.isShowDialog,
    (newValue) => {
        if (newValue == true) {

        }
    }, { immediate: true }
);




// 暴露变量
defineExpose({
    openDialog,
});


</script>











<style lang="scss">
.el-select {
    width: 100% !important;
}

.el-form .el-form-item:last-of-type {
    margin-bottom: 22px !important;
}


.mail-send-edit-dialog-container {
    .bar_tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .el-table__expanded-cell {
        padding: 20px;
    }


    .alig_container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &>div {
            margin: 15px 0px;
            display: flex;
            justify-content: center;
        }
    }
}
</style>